import React, { Component } from 'react';
import {
	StyleSheet, Text, View, PixelRatio, TextInput
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class UpDown extends Component {
	constructor(props) {
		super(props);
		let { value, selectIndex, keyboardType, editable } = this.props;
		this.state = {
			selectIndex,
			value,
			editable
		}
	}

	_setIndex (index) {
		let { callBack } = this.props;
		if (this.state.value == '0') {
			this.setState({
				value: '',
				selectIndex: index
			}, function () {
				callBack && callBack({
					value: this.props.value,
					selectIndex: this.state.selectIndex
				});
			})
		} else {
			this.setState({
				selectIndex: index
			}, function () {
				callBack && callBack({
					value: this.props.value,
					selectIndex: this.state.selectIndex
				});
			})
		}
	}

	render () {
		let { selectIndex, value, editable } = this.state;
		let { callBack, keyboardType, unit } = this.props;
		value = this.props.value || value;
		selectIndex = this.props.selectIndex || selectIndex;
		editable = this.props.editable || editable;
		return (
			<View style={styles.ItemBox}>
				<Text onPress={() => { if (editable) { this._setIndex(0) } }} style={[styles.item, selectIndex == 0 ? styles.itemActive : null]}>升</Text>
				<Text onPress={() => { if (editable) { this._setIndex(1) } }} style={[styles.item, selectIndex == 1 ? styles.itemActive : null]}>贴</Text>
				<TextInput
					underlineColorAndroid='transparent'
					keyboardType={keyboardType}
					editable={editable}
					value={value}
					style={styles.itemInput}
					onChangeText={(text) => {
						const newText = text.replace(/[^\d^\.]+/, '');

						if (newText != '') {
							if (newText == 0) {
								this.setState({ selectIndex: 3 });
							} else {
								if (this.state.selectIndex == 3) {
									this.setState({ selectIndex: 0 });
								}
							}
						}

						this.setState({ value: newText }, function () {
							callBack && callBack({
								value: this.state.value,
								selectIndex: selectIndex
							});
						});
					}}
				/>
				<Text style={styles.unit}>{unit}</Text>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	itemInput: {
		width: 80 * scale,
		height: 27 * scale,
		paddingVertical: 0,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		textAlign: 'center'
	},
	ItemBox: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	item: {
		width: 27 * scale,
		height: 27 * scale,
		lineHeight: 27 * scale,
		color: style.color.darkGray,
		textAlign: 'center',
		backgroundColor: style.color.smallBlack,
		borderRadius: 4 * scale,
		marginRight: 8 * scale
	},
	itemActive: {
		backgroundColor: style.color.cerulean,
		color: style.color.white
	},
	unit: {
		color: '#8b8b8b',
		fontSize: 12 * scale
	}
})